<script setup lang="ts">
import { ref } from 'vue'
import * as integralProductApi from '@/api/integralProduct'
import { message } from 'ant-design-vue'

const myModal = ref()

const showModal = (record: any) => {
  myModal.value?.showModal()
  formState.value.id = record.id
  formState.value.status = record.status
}

import type { SelectProps } from 'ant-design-vue'
const statusList = ref<SelectProps['options']>([
  {
    label: '上架',
    value: 1,
  },
  {
    label: '下架',
    value: 2,
  },
])

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let labelCol = { span: 6 }
interface FormState {
  id: string
  status: number
}
const formState = ref<FormState>({
  id: '',
  status: 1,
})

let loading = ref<boolean>(false)
const handleOk = async () => {
  loading.value = true
  let params = {
    id: formState.value.id,
    status: formState.value.status,
  }
  try {
    const { state, message: msg } = await integralProductApi.editPointProductStatus(params)
    if (state === 200) {
      message.success('修改成功')
      myModal.value?.cancelModal()
      emit('refresh')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}
</script>

<template>
  <MyModal ref="myModal" title="修改状态" :top="35">
    <template #content>
      <a-form ref="loginForm" :model="formState" :label-col="labelCol" style="width: 400px">
        <a-form-item name="id" label="id">
          <a-input v-model:value="formState.id" disabled></a-input>
        </a-form-item>

        <a-form-item label="状态" name="status">
          <a-select v-model:value="formState.status" placeholder="请选择状态" allowClear>
            <a-select-option v-for="(item, index) in statusList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item style="text-align: right">
          <a-space>
            <a-button @click="() => myModal.cancelModal()">取消</a-button>
            <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </template>
  </MyModal>
</template>
